<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="jpath" value="${pageContext.request.contextPath }"/>
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<script type="text/javascript" src="${jpath}/static/FrontStatic/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="${jpath}/static/FrontStatic/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="${jpath}/static/FrontStatic/css/bootstrap.min.css"/>
<link href="${jpath}/static/FrontStatic/css/main.css" rel="stylesheet" type="text/css" />
<link href="${jpath}/static/FrontStatic/css/news.css" rel="stylesheet" type="text/css" />

<title>无标题文档</title>
</head>

<body>
	<div class="bg">
        <div class="row title">
            <div class="col-2" align="center">
                <img src="${jpath}/static/FrontStatic/image/back_1.png" id="back"/>
            </div>
            <div class="col-8" align="center">新闻资讯</div>
            <div class="col-2" align="center">
            </div>
        </div>
        <div class="row">
            <div class="col-12 nav_s">
            	<c:forEach items="${newsList}" var="news" varStatus="status">
            		<c:if test="${status.index==0}"><span NewsId="${news.newsId}" class="nav_s_o">${news.columnName}</span></c:if>
            		<c:if test="${status.index!=0}"><span NewsId="${news.newsId}">${news.columnName}</span></c:if>
            	</c:forEach>
                
            </div>
        </div>
        <div class="row roll">
            <div class="col-12">
                <div id="demo" class="carousel slide" data-ride="carousel">
                  <!-- 指示符 -->
                    <ul class="carousel-indicators">
                        <li data-target="#demo" data-slide-to="0" class="active"></li>
                        <li data-target="#demo" data-slide-to="1"></li>
                        <li data-target="#demo" data-slide-to="2"></li>
                    </ul>
                 
                  <!-- 轮播图片 -->
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="${jpath}/static/FrontStatic/image/1.png"/>
                            <div class="carousel-caption">
                                <p>描述文字!</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="${jpath}/static/FrontStatic/image/1.png"/>
                            <div class="carousel-caption">
                                <p>描述文字!</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="${jpath}/static/FrontStatic/image/1.png" />
                            <div class="carousel-caption">
                                <p>描述文字!</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="content">
        </div>
    </div>
<script src="${jpath}/js/system_plugins.js"></script>
<script>
	
	var jpath="${jpath}";
	$(function(){
		$("#back").click(function(){
			location.href="${jpath}/front/index";
		}); 
		
		var colM = 	[{
						name:"NewsInformationId"
					},{
						name:"ImagePath"
					},{
						name:"Title"
					},{
						name:"NewsContent"
					},{
						name:"ReleaseTime"
					},{
						name:"ReleasePeople"
					}];
		var NewsId=$(".nav_s span").eq(0).attr("NewsId");
		var params={pageNum:1,pageSize:3,NewsId:NewsId};
		$("#content").loadInfo(colM,params,"${jpath}/FrontNews/ShowNews",jpath,true);
        $(".nav_s span").click(function(){
            var _this=$(this);
            $(".nav_s span").each(function(index,e){
                $(e).removeClass("nav_s_o");
            });
            _this.addClass("nav_s_o");
            
            var NewsId=$(this).attr("NewsId");
            
            var par={pageNum:1,pageSize:3,NewsId:NewsId};
            
			$("#content").loadInfo(colM,par,"${jpath}/FrontNews/ShowNews",jpath,true);
        });
        
        $("body").on("click",".news_con",function(){
			var id=$(this).attr("id");
			location.href="${jpath}/FrontNews/newdetails?NewsInformationId="+id;
 		});
    });
    
    $(window).scroll(function () {
    	var NewsId=$(".nav_s span[class='nav_s_o']").attr("NewsId");
       	var par={pageNum:1,pageSize:3,NewsId:NewsId};
		var scrollTop = $(this).scrollTop();
		var scrollHeight = $(document).height();
		var windowHeight = $(this).height();
		if (scrollTop + windowHeight == scrollHeight) {
		//此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
			alert("bottom reached !");
			$("#content").loadInfo(par,"${jpath}/FrontNews/ShowNews",jpath,true);
		}
   }); 
</script>
</body>
</html>
 